@extends('layouts.admin')

@section('content')
<link rel="stylesheet" href="/assets/css/jquery-ui-1.10.3.custom.min.css" />
<style type="text/css">
.delegate{margin:10px;}
</style>
<div class="page-content">

    <div class="row">

        <div class="col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">新增一篇文章</div>
                <div class="panel-body">

                    @if (count($errors) > 0)
                        <div class="alert alert-danger">
                            <strong>新增失败</strong> 输入不符合要求<br><br>
                            {!! implode('<br>', $errors->all()) !!}
                        </div>
                    @endif

                    <form action="{{ url('article') }}" method="POST" name="my_form" enctype="multipart/form-data" onSubmit="document.my_form.body.value = $.base64.btoa($('#editor1').html())">
                        {!! csrf_field() !!}
                        <input type="text" name="title" class="form-control" required="required" placeholder="请输入标题">
                        <br>
                        <textarea name="body" style="display:none;"></textarea>
                        <br>

                        <div class="wysiwyg-editor" id="editor1"></div>
                        <div class="hr hr-double dotted"></div>

                        <label>附件：</label><input type="file" name="attach" placeholder="附件" />
                        <button class="btn btn-lg btn-info">新增文章</button>
                    </form>

                </div>
            </div>

        </div>
    </div>
</div>


<script src="/assets/js/jquery-ui-1.10.3.custom.min.js"></script>

<script src="/assets/js/jquery.ui.touch-punch.min.js"></script>

<script src="/assets/js/markdown/markdown.min.js"></script>

<script src="/assets/js/markdown/bootstrap-markdown.min.js"></script>

<script src="/assets/js/jquery.hotkeys.min.js"></script>

<script src="/assets/js/bootstrap-wysiwyg.min.js"></script>

<script src="/assets/js/bootbox.min.js"></script>
<script src="/assets/js/jquery.base64.js"></script>
<script type="text/javascript">

    jQuery(function($){
        $.base64.utf8encode = true;
        $('#editor1').ace_wysiwyg({

            toolbar:

            [

                'font',

                null,

                'fontSize',

                null,

                {name:'bold', className:'btn-info'},

                {name:'italic', className:'btn-info'},

                {name:'strikethrough', className:'btn-info'},

                {name:'underline', className:'btn-info'},

                null,

                {name:'insertunorderedlist', className:'btn-success'},

                {name:'insertorderedlist', className:'btn-success'},

                {name:'outdent', className:'btn-purple'},

                {name:'indent', className:'btn-purple'},

                null,

                {name:'justifyleft', className:'btn-primary'},

                {name:'justifycenter', className:'btn-primary'},

                {name:'justifyright', className:'btn-primary'},

                {name:'justifyfull', className:'btn-inverse'},

                null,

                {name:'createLink', className:'btn-pink'},

                {name:'unlink', className:'btn-pink'},

                null,

                {name:'insertImage', className:'btn-success'},

                null,

                'foreColor',

                null,

                {name:'undo', className:'btn-grey'},

                {name:'redo', className:'btn-grey'}

            ],


        }).prev().addClass('wysiwyg-style2');
    });




</script>
@endsection